/* SPDX-License-Identifier: Apache-2.0 */

// FORMS

@mixin input-field-active-styles {
  box-shadow: inset 0 0 0 1px $primary-color;
  border-color: $primary-color;
  outline: none;
}

// TODO: Cannot use :where() in the following selector
// because of the order of normalize.css will reset it.
:is(
  input:not([type]),
  select,
  textarea,
  [type="color"],
  [type="date"],
  [type="datetime"],
  [type="datetime-local"],
  [type="email"],
  [type="month"],
  [type="month"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="time"],
  [type="url"],
  [type="week"]
) {
  font-size: $input-font-size;
  border-radius: 2px;
  background-color: $white;
  padding: 7px;
  min-height: 40px;
  border: 1px solid $accessible-border-color;
  color: $text-color;
  vertical-align: middle;
  width: 250px;
  max-width: 100%;

  &:hover,
  &:active,
  &:focus {
    @include input-field-active-styles;
  }
}

input[type="checkbox"] {
  &:focus,
  &:hover,
  &:active {
    @include input-field-active-styles;
  }
}

:where(input:disabled, select:disabled) {
  cursor: not-allowed;
  box-shadow: none;
  background-color: $base-grey;
}

label {
  vertical-align: middle;
}
